<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(router, i) in breadcrumbList" :key="i">
            <span v-if="breadcrumbList.length - 1 === i">{{ router?.meta?.title }}</span>
            <router-link v-else :to="router">{{ router?.meta?.title }}</router-link>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script>
export default {
    name: "GBreadcrumb",
    // v3
    computed: {
        breadcrumbList() {
            return this.$route.matched.filter(route => route?.meta?.title);
        }
    },
    // data() {
    //     return {
    //         breadcrumbList: []
    //     };
    // },
    //v1
    // created() {
    //     this.breadcrumbList = this.$route.matched.filter(route => route?.meta?.title);
    // },
    // watch: {
    //     $route: {
    //         deep: true,
    //         immediate: true, v2
    //         handler() {
    //             console.log(this.$route.matched, "this.$route.matched");
    //             this.breadcrumbList = this.$route.matched.filter(route => route?.meta?.title);
    //         }
    //     }
    // }
};
</script>